import { Flex } from 'antd-mobile';
import React, { Component } from 'react';
// import './nav.css'
import {withRouter} from  "react-router-dom"


class Nav extends Component {
    handle1(){
        this.props.history.push('/everyday')
    }

    handle2(){
        this.props.history.push('/singlist')
    }
    handle3(){
        this.props.history.push('/rangelist')
    }
    handle4(){
        this.props.history.push('/tv')
    }
    
    render() {
        return (
            <div className='searchNav'>
                <Flex >
                    <Flex.Item className='searchNav-1' onClick={this.handle1.bind(this)}><span>电台分类</span></Flex.Item>
                    <Flex.Item className='searchNav-2' onClick={this.handle2.bind(this)}><span>电台排行</span></Flex.Item>
                    <Flex.Item className='searchNav-3' onClick={this.handle3.bind(this)}><span>付费精品</span></Flex.Item>
                    <Flex.Item className='searchNav-4' onClick={this.handle4.bind(this)}><span>音乐课堂</span></Flex.Item>                   
                </Flex>
                <hr/>
                
            </div>

        )
    }
}

export default withRouter(Nav)